<script>
 import {onMount} from 'svelte';


 var courses = [];


 onMount(async()=>{
    const response = await fetch("/api/course");
    if(response.ok){
        courses = await response.json();
    }

 })

 function gotoTeacher(){
    window.location.href = "/admin/teacher"
  }
  function gotoStudent(){
    window.location.href = "/admin"
  }

</script>


<ul>
    <p>课程列表如下：</p>
    <button value="add" >新增</button>
    {#each courses as course}
      <li>
        <div>
          <b>课程号： {course.id}</b>
          <b>课程名称： {course.coursename}</b>
          <b>课程学分： {course.credit}</b>
          <b>课程教师工号： {course.teacherid}</b>
          <button class="mybutton" id={course.studentname} value={course.id} >修改</button>
          <button class="mybutton" value="delete" >删除</button>
        </div>
      </li>
    {/each}
  </ul>
    <div class="button-container">
    <button class="mybutton" on:click={gotoTeacher}>教师表</button>
    <button class="mybutton"on:click={gotoStudent}>学生表</button>
</div>


<style>
.modal {
  display: none; /* 在开始时隐藏 modal */
  position: fixed; /* 在全屏下保持定位 */
  z-index: 1; /* 坐落在其他内容上方 */
  left: 0;
  top: 0;
  width: 100%; /* 完整的宽度 */
  height: 100%; /* 完整的高度 */
  overflow: auto; /* 需要时启用滚动条 */
  background-color: rgb(0,0,0); /* 遮罩层背景色 */
  background-color: rgba(0,0,0,0.4); /* 可以添加透明度效果 */
}

.inline-block-element {
        /* display: flex; */
        align-items: center;
    }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 20px;
  }

  li:nth-of-type(4n+1) {
    background-color: #FAF0E6;
  }

  li:nth-of-type(4n+2) {
    background-color: #FFF0F5;
  }

  li:nth-of-type(4n+3) {
    background-color: #F0FFF0;
  }

  li:nth-of-type(4n) {
    background-color: #F0F8FF;
  }

  li > div {
    display: flex;
    justify-content: space-around;
  }

  .mybutton {
    flex-shrink: 0;  
    margin: 0 15px;  
    padding: 10px 20px;  
    background-color: #38a1db;
    color: #ffffff;
    border: 1px solid #38a1db;
    cursor: pointer;
    transition: .4s;
  }
  .button-container {
    display: flex;
    gap: 500px; /* 设置按钮之间的间隔距离 */
  }

  p
  {
    font-size: 10px;
      font-weight: bold;
      text-align: center;
      padding: 20px;
      background-color: #007bff;
      color: #fff;
  }
  .弹窗 input {
      margin-bottom: 10px;
      padding: 5px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 4px;
      color: black;
    }

  .mybutton:hover {
    background-color: #ffffff;
    color: #38a1db;
  }

  .弹窗{
    border: none;
    display:flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width:30%;
    height: 400px;
    background: lightblue;
    position: fixed;
    padding: 40px 40px;
    left:36%;
    top:30%;
    border-radius: 10px;
    border: none;
  }
   .xbutton{
    position: absolute;
    top: 0; 
    right: 19px; 
    margin: -15px -10px 0 auto;
    width: 20px;
    height: 40px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
  }



</style>